﻿<%@ Page Title="主页" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <script type="text/javascript">
        //获取数据的URL地址
        function createObjectURL(blob) {
            if (window.URL) {
                return window.URL.createObjectURL(blob);
            } else if (window.webkitURL) {
                return window.webkitURL.createObjectURL(blob);
            } else {
                return null;
            }
        }

        //文件检测
        function checkFile() {
            //获取文件
            var file = $$("uploadFile").files[0];
            //文件为空判断
            if (file === null || file === undefined) {
                alert("请选择您要上传的文件！");
                $$("btnSelect").innerHTML = "单击选择要上传的照片";
                return false;
            }

            //检测文件类型
            if (file.type.indexOf('image') === -1) {
                alert("请选择图片文件！");
                return false;
            }

            //计算文件大小
            var size = Math.floor(file.size / 1024);
            if (size > 5000) {
                alert("上传文件不得超过5M!");
                return false;
            };
            //添加预览图片
            $$("btnSelect").innerHTML = "<img class=\"photo\" src=\"" + createObjectURL(file) + "\"/>";
        };

        //监听图片URL地址更改
        addEventListener($$("uploadFile"), "change", function () {
            checkFile();
        });

        //监听单击文件选择按钮
        addEventListener($$("btnSelect"), "click", function () {
            //弹出文件选择框
            $$("uploadFile").click();
        });
        //监听确认上传按钮的点击事件
        addEventListener($$("btnConfirm"), "click", function (e) {

            if (checkFile()) {
                try {
                    //执行上传操作var xhr = createXHR();
                    $$("maskLayer").style.display = "block";
                    xhr.open("post", "/uploadPhoto.action", true);
                    xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
                    xhr.onreadystatechange = function () {
                        if (xhr.readyState == 4) {
                            var flag = xhr.responseText;
                            if (flag == "success") {
                                alert("图片上传成功！");
                            } else {
                                alert("图片上传成功！");
                            };
                            $$("maskLayer").style.display = "none";
                        };
                    };
                    //表单数据
                    var fd = new FormData();
                    fd.append("myPhoto", $$("uploadFile").files[0]);
                    //执行发送        
                    xhr.send(fd);
                } catch (e) {
                    console.log(e);
                }
            }
        });    
    </script>
</asp:Content>

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <h2>
        欢迎使用 ASP.NET!
    </h2>
    <p>
        若要了解关于 ASP.NET 的详细信息，请访问 <a href="http://www.asp.net/cn" title="ASP.NET 网站">www.asp.net/cn</a>。
    </p>
    <p>
        您还可以找到 <a href="http://go.microsoft.com/fwlink/?LinkID=152368"
            title="MSDN ASP.NET 文档">MSDN 上有关 ASP.NET 的文档</a>。
    </p>
    <div id="wp" class="warpper">            
            <a id="btnSelect">单击选择要上传的照片</a>
            <input id="uploadFile" type="file" name="myPhoto" />        
            <button id="btnConfirm" class="btn" >确认上传</button>        
    </div>
    <div id="maskLayer" class="mask-layer" style="display:none;">
        <p>图片正在上传中...</p>
    </div>
</asp:Content>
